<template>
  <!-- 添加或修改.详情对话框 -->
  <dt-dialog :width="'1200px'" :title="titleMap[title]" :confirm-hidden="title==='detail'" :visible.sync="open" @comfirmBtn="submitForm" @closeDialog="close">
    <div slot="content">
      <parser v-if="isParser" ref="parserForm" :is-detail="isDetail" :form-conf="formConf" :is-preview="true" @submit="sumbitParser" />
    </div>
  </dt-dialog>
</template>
<script>
import Parser from '@/framework/views/unifiedReporting/formDesign/components/parser/Parser'
import { formDataAdd, formDataEdit, customFormDataDetail, getDetailTableList } from '@/framework/api/unifiedReporting/unifiedReporting' // { getformDesign, getFormJson }
export default {
  name: 'FormDesignPreview',
  components: {
    Parser
  },
  props: {
    formJson: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 接口所需参数
    apiProps: {
      type: Object,
      default: () => {
        return {
          id: '123'
        }
      }
    },
    // 接口对象
    api: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // 弹出层标题
      title: 'add',
      // 是否显示弹出层
      open: false,
      previewContent: '',
      drawingList: [],
      formConf: {},
      isParser: true,
      titleMap: {
        add: '新增',
        edit: '编辑',
        detail: '详情'
      },
      interfaceObj: {},
      detailJson: {},
      getValData: {},
      formDataId: '',
      isDetail: false
    }
  },
  created() {
  },
  methods: {
    submitForm() {
      this.$refs.parserForm.submitForm()
    },
    sumbitParser(param) {
      // this.handleParam
      // console.log('校验通过', param)
      // console.log('处理结果', { ...param.valData, ...this.handleParam(param.formData) })
      const params = {
        formData: param.valData,
        childFormData: this.handleParam(param.formData),
        formId: this.$route.query.formId,
        formDataId: this.formDataId
      }
      // this.detailJson = JSON.parse(JSON.stringify(param.formData))
      if (this.title === 'add') {
        formDataAdd(params, this.interfaceObj.url, this.interfaceObj.methods).then(() => {
          this.$dtModal.msgSuccess('新增成功')
          this.open = false
          this.$emit('getList')
        })
      } else {
        formDataEdit(params, this.interfaceObj.url, this.interfaceObj.methods).then(() => {
          this.$dtModal.msgSuccess('编辑成功')
          this.$emit('getList')
          this.open = false
        })
      }
    },
    handleParam(formData) {
      return (formData.fields || []).reduce((pre, item) => {
        if (item.__config__.tag === 'dt-table') {
          pre[item.tableName] = item.__config__.tableOpts.tableData
        }
        return pre
      }, {})
    },
    // 取消按钮
    close() {
      this.$refs.parserForm.resetForm()
    },
    handleOpen(type, row, interfaceObj) {
      this.title = type
      this.formConf = JSON.parse(JSON.stringify(this.formJson))
      this.interfaceObj = interfaceObj
      this.open = true
      this.isParser = false
      this.isDetail = false
      if (type === 'add') {
        setTimeout(() => {
          this.isParser = true
        }, 200)
      } else {
        // 查询主表返回值
        this.formDataId = row.id
        customFormDataDetail({ formId: this.$route.query.formId, formDataId: row.id }).then((res) => {
          this.getValData.formData = res.data
          // 查询从表返回值
          getDetailTableList({ formId: this.$route.query.formId, formDataId: row.id }).then((res) => {
            this.getValData.childFormData = res.data
            this.dealFromJsonValue(this.getValData)
            this.isParser = true
            if (type === 'detail') {
              this.formConf.disabled = true // 禁止编辑修改
              this.isDetail = true
              // this.formConf.formBtns = false // 隐藏parser里的按钮
            }
          })
        })
        // 查询从表返回值
      }
    },
    // 前端 拿到数据后 循环处理成tableOpts格式
    dealFromJsonValue(obj) {
      // const obj = {
      //   formData: {
      //     bianji: '<p>1223</p>',
      //     checkbox: [2],
      //     color: '#CD4343',
      //     data: '2023-08-07',
      //     datarange: ['2023-08-07', '2023-08-09'],
      //     httpMethod: 'POST',
      //     field145: [
      //       {
      //         id: '1694557079907725313',
      //         name: '三方角色导入模版 (1).xls',
      //         url: 'http://192.168.100.172:30377/stage-api/sysFileInfo/publicDownload?fileId=1694557079907725313'
      //       }
      //     ],
      //     image: [
      //       {
      //         fileId: '1694556475537879042',
      //         name: 'preview (3).png',
      //         url: 'http://192.168.100.172:30377/stage-api/file/sysFileInfo/previewByObjectName?fileBucket=defaultBucket&fileObjectName=1694556475537879042.png'
      //       }
      //     ],
      //     jilian: [1, 2],
      //     number: 1,
      //     password: '123',
      //     radio: 2,
      //     rate: 2,
      //     resourceName: '1231',
      //     resourceUrl: '131313',
      //     slide: 33,
      //     textarea: ';werjfgwejg',
      //     time: '12:22:33',
      //     timerange: ['12:22:33', '12:22:34'],
      //     field147: 'hahah'
      //   },
      //   formId: '',
      //   formDataId: '',
      //   childFormData: [
      //     { 128: [1, 2] },
      //     { 129: [2, 3] }
      //   ]
      //   childFormData:
      //     { 128: [1, 2] ，129: [2, 3]},
      //
      //
      //   // childFormData: [
      //   //   { tableName: 128,
      //   //     rows: [1, 2] },
      //   //   { tableName: 128,
      //   //     rows: [1, 2] }
      //   // ]
      // }
      // const formConf = this.json1.fields
      this.formConf.fields.forEach(cur => {
        const config = cur.__config__
        if (cur.__vModel__) config.defaultValue = obj.formData[cur.__vModel__]
        if (cur.__config__.children && cur.__config__.layout === 'dtTableDialogRender') {
          // config.tableOpts.tableData = obj.childFormData.map(item => item.tableName === cur.__config__.formId)[0].row
          // config.tableOpts.tableData = obj.childFormData.map(item => item[cur.tableName] === cur.tableName)[0]
          config.tableOpts.tableData = obj.childFormData[cur.tableName]
        }
        if (cur.__config__.children && cur.__config__.layout === 'rowFormItem') {
          cur.__config__.children.forEach(item => {
            if (item.__vModel__) item.__config__.defaultValue = obj.formData[item.__vModel__]
          })
        }
      })
    }

  }
}
</script>
  <style lang="scss" scoped>
  ::v-deep .drawing-item-copy,::v-deep .drawing-item-delete{
    display: none;
  }
  </style>

